<template>
	<m-page :pageData="pageData" :mPadding="isMobile?'40rpx':'40px'">
		<view class="setting" slot="content">
		
			<view class="setting-form">
				<view class="setting-form-item">
					<view class="setting-form-label setting-form-label2 flexdc">
						<text >
							头像
						</text>
						<text class="fz10 icon-mb" style="margin-top: 10rpx;">
							大小不超过2M
						</text>
					</view>
					
					<view class="setting-form-content flex-start-nowrap alic">
						<m-uploadAvatar :test="1234" :url="loginInfo.avatar" @cb="getUserInfoFun"></m-uploadAvatar>
						<view class="setting-form-content-icon icon-mb ml12 cup ">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line setting-form-line1" v-if="isMobile">
					<u-line></u-line>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						用户ID
					</text>
					<view class="setting-form-content flex-start-nowrap">
						{{loginInfo.user_id}}
						<view class="setting-form-content-icon ml12 cup "  :style="{marginLeft:isMobile?'20rpx':'30px'}" @click="copyId">
							<u-icon  size="16" name="/static/images/setting/copy.png"></u-icon>
						</view>
					</view>
				</view>
				<view class="setting-form-line setting-form-line1" v-if="isMobile">
					<u-line></u-line>
				</view>
				<view class="setting-form-item">
					<view class="setting-form-label setting-form-label2 flexdc">
						<text class="  ">
							姓名
						</text>
						<text :class="[' icon-mb', loginInfo.is_authentication?'c0f':'c999']" style="font-size: 10px; margin-top: 5px;">
							({{loginInfo.is_authentication?'已':'未'}}实名)
						</text>
					</view>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.real_name}}
						
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic cup" @click="goRealName">
							<!-- '/static/images/setting/realName_no.png' -->
							<u-icon  size="20" 
							:name="'/static/images/setting/realName.png'"></u-icon>
							<!-- loginInfo.is_authentication?'c0f':'cff7' -->
							<text :class="['']" style="color: #26BBFF; margin-left: 5px;">{{loginInfo.is_authentication?'已':'未' }}实名</text> 
							<u-icon name="arrow-right" color="##26BBFF" size="16"></u-icon>  
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup flex-start-nowrap  fz12 alic"  @click="goRealName">
						<!-- 	<u-icon  size="20"
							:name="loginInfo.is_authentication?'/static/images/setting/realName.png':'/static/images/setting/realName_no.png'"></u-icon>
							<text :class="['plr5',loginInfo.is_authentication?'c0f':'cff7']">{{loginInfo.is_authentication?'已':'未'}}实名</text> --> 
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line setting-form-line1" v-if="isMobile">
					<u-line></u-line>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						宅小职昵称
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.nick_name || loginInfo.real_name}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" @click="goNickName">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup "  @click="goNickName">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line setting-form-line1" v-if="isMobile">
					<u-line></u-line>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						简介
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.introduction || '无'}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" @click="goIntro">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup " @click="goIntro">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line">
					<u-line></u-line>
				</view>
				<view class="setting-form-item" :style="{ 'border-bottom':isMobile ?'1px solid #e5e5e5':''}">
					<text class="setting-form-label  alic">
						账号邮箱<text class="ce8 ">*</text>
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.email || '无'}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" @click="goEditEmail">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup " @click="goEditEmail">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						账号手机号<text class="ce8 ">*</text>
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.phone || '无'}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" @click="goEditPhone">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup " @click="goEditPhone">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line">
					<u-line></u-line>
				</view>
				<view class="setting-form-item" :style="{ 'border-bottom':isMobile ?'1px solid #e5e5e5':''}">
					<text class="setting-form-label  alic">
						收款支付宝账号
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.alipay_account || '无'}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" 
						
						@click="goZfb">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup " @click="goZfb">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						收货地址
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						{{loginInfo.delivery_address || '无'}}
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" 
						@click="goAddress">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup "  @click="goAddress">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line">
					<u-line></u-line>
				</view>
				<view class="setting-form-item">
					<text class="setting-form-label  alic">
						修改密码
					</text>
					<view class="setting-form-content flex-start-nowrap alic">
						<text style="padding-top: 4px;">
							********
						</text>
						<view class="setting-form-content-icon icon-pc ml12 flex-start-nowrap c0f fz12 alic  cup" @click="goRestPwd">
							<u-icon name="/static/images/setting/edit.png" color="#26bbff" size="16"></u-icon> 
						</view>
						<view class="setting-form-content-icon icon-mb ml12 cup " @click="goRestPwd">
							<u-icon name="arrow-right" color="#cac9d1" size="20"></u-icon>  
						</view>
					</view>
				</view>
				<view class="setting-form-line" v-if="isMobile">
					<u-line></u-line>
				</view>
			</view>
		</view>
		<!-- <view slot="contentMb">
			<view class="" v-for="(item,index) in 100" :key="index">
				{{item}}
			</view>
		</view> -->
	</m-page>
</template>

<script>
	import { getUserInfo } from "@/common/api/user.js"
	export default {
		name:'forgetPwd',
		data() {
			let _this = this;
			return {
				formList:[
					
				],
				pageData:{
					title:'设置',
					tips:'setting',
					subTitle:true,
				},
			};
		},
		onShow(){
			this.getUserInfoFun()
			
		},
		onLoad(){
		},
		methods:{
			copyId(){
				uni.setClipboardData({
					data: this.loginInfo.user_id,
					success: () =>
						uni.showToast({
							icon:'none',
							title: '复制成功'
						})
				})
			},
			goRealName(){
				this.utils.goPath('/pages/setting/realName')
			},
			goIntro(){
				this.utils.goPath('/pages/setting/editIntro')
			},
			goNickName(){
				this.utils.goPath('/pages/setting/editNickName')
			},
			goZfb(){
				this.utils.goPath('/pages/setting/editZfb')
			},
			goEditPhone(){
				this.utils.goPath('/pages/setting/editPhone')
			},
			goEditEmail(){
				this.utils.goPath('/pages/setting/editEmail')
			},
			goAddress(){
				this.utils.goPath('/pages/setting/editAddress')
			},
			goRestPwd(){
				this.utils.goPath('/pages/forgetPwd/checkUser',{setting:1})
			},
			// 更新头像后重新获取用户信息
			getUserInfoFun(){
				this.$store.dispatch('set_userinfo')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ml12{
		margin-left: 30px;
	}
	.ml30{
		margin-left: 30px;
	}
	.fz12{
		font-size: 14px;
	}
	.plr5{
		padding: 0 5rpx;
	}
	.setting{
		&-form{
			margin-top: 10px;
			&-item{
				line-height: 1;
				padding: 15px 0;
				@extend .flex-start-nowrap;
				align-items: center;
			}
			&-label{
				width: 115px;
				text-align: right;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #2D3036;
				padding-right: 20px;
				@extend .flex-end-nowrap;
				text{
					vertical-align: middle;
				}
			}
			.icon-mb{
				display: none;
			}
			&-content{
				color: #646A74;
				@extend .alic;
				&-icon{
					
				}
				
				&-icon:hover{
					opacity: .8;
				}
			}
			&-line{
				padding: 20px 0;
			}
			
		}
	}

	@media screen and (min-width: 0px) and (max-width:1024px){
		.ml12{
			margin-left: 12rpx;
		}
		.setting{
			&-form{
				&-item{
					justify-content: space-around;
					padding: 0;
					height: 120rpx;
				}
				&-item:first-child{
					height: 160rpx;
				}
				&-label{
					justify-content: flex-start;
					text-align: left;
					text{
						vertical-align: middle;
					}
				}
				&-label2{
					justify-content: space-around;
				}
				.icon-pc{
					display: none;
				}
				.icon-mb{
					display: flex;
				}
				&-content{
					width: calc(100% - 135px);
					justify-content: flex-end;
					color: #646A74;
					&-icon{
						
					}
					
					&-icon:hover{
						opacity: .8;
					}
				}
				&-line{
					height: 25rpx;
					margin-left: -100px;
					width: calc(100% + 200px);
					padding: 0;
					background: #fbfcfe;
					.u-line{
						display: none;
					}
				}
				&-line1{
					height: 1px;
					margin: 0;
					width: 100%;
					background: #e5e5e5;
				}
				
			}
		}
	}
</style>
